<template>
  <div :class="['col-text', color]">
    <div class="title">{{ title }}</div>
    <div class="desc">{{ desc }}</div>
    <div class="tags">
      <van-tag v-for="(item, index) in tags" :key="index" plain class="tag-item">{{ item }}</van-tag>
    </div>

    <div class="already">
      已有
      <span class="number">{{ number }}</span>
      人完成评测
    </div>

    <div v-show="hot" class="service-tag">特色服务</div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tag } from 'vant'

Vue.use(Tag)

export default {
  props: {
    color: {
      type: String,
      default: 'blue'
    },

    title: {
      type: String,
      default: ''
    },

    desc: {
      type: String,
      default: ''
    },

    number: {
      type: [Number, String],
      default: 0
    },

    tags: {
      type: Array,
      default: () => []
    },

    hot: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="less" scoped>
.col-text {
  position: relative;
  width: calc(100vw - 70px);
  height: 112px;
  margin-right: 15.5px;
  border-radius: 5px;
  box-shadow: 1px 3px 7px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column;
  padding-top: 26px;
  padding-bottom: 31px;
  text-align: center;
  margin-top: 5px;

  .service-tag {
    width: 65px;
    height: 20px;
    background-color: #ec5431;
    position: absolute;
    top: -3px;
    right: -2px;
    border-radius: 10px 2px 2px 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 11px;
  }
  .title {
    font-size: 18px;
    font-weight: 500;
    color: #222222;
  }

  .desc {
    font-size: 14px;
    color: #666666;
    font-weight: 300;
  }

  .tags {
    .tag-item {
      margin: 0 4px;
      background-color: rgba(0, 0, 0, 0);
    }
  }

  .already {
    color: #999999;
    font-size: 12px;
  }
}

.blue {
  background: linear-gradient(to right bottom, #ffffff, #dbe5fa);
  .number {
    color: #4586ff;
  }
  .action {
    background-color: #4586ff;
  }
  .tags {
    .tag-item {
      color: #4586ff;
    }
  }
}

.yellow {
  background: linear-gradient(to right bottom, #ffffff, #fffaec);
  .number {
    color: #ff7002;
  }
  .action {
    background-color: #ff7002;
  }
  .tags {
    .tag-item {
      color: #ff7002;
    }
  }
}
</style>